<%@page import="org.apache.commons.net.ftp.FTPClient"%>
<%@page import="java.util.ArrayList"%>
<%@page import="RRHH_Modelo.RHH_REGIONAL_DEPTO"%>
<%@page import="RRHH_Modelo.RHH_TIPOS_CARGO"%>
<%@page import="RRHH_Modelo.RHH_TELEFONOS"%>
<%@page import="RRHH_Modelo.RHH_SUCURSAL"%>
<%@page import="RRHH_Modelo.RHH_PERSONA_PROFESION"%>
<%@page import="RRHH_Modelo.RHH_FECHAS_HITO"%>
<%@page import="org.apache.commons.net.util.Base64"%>
<%@page import="org.apache.poi.util.IOUtils"%>
<%@page import="java.io.InputStream"%>
<%@page import="RRHH_Modelo.RHH_CARGO_DEP_REG_SUC"%>
<%@page import="RRHH_Modelo.RHH_CARGO"%>
<%@page import="RRHH_Modelo.RHH_CATEGORIA_DATO"%>
<%@page import="RRHH_Modelo.RHH_PERSONA"%>
<%@page import="ADMINISTRACION_MODELO.ADM_TIPO_ACTIVO_FUNGIBLE"%>
<%@page import="RRHH_Modelo.RHH_DATOS"%>
<%@page import="RRHH_Modelo.RHH_SALARIO_MINIMO"%>
<%@page import="RRHH_Modelo.RHH_PROFESION"%>
<%@page import="RRHH_Modelo.RHH_REGIONAL"%>
<%@page import="java.util.Calendar"%>
<%@page import="RRHH_Modelo.RHH_DEPARTAMENTO"%>
<%@page import="Modelo.SIS_ACCEDIDOS"%>
<%@page import="Conexion.Conexion"%>
<%@page import="RRHH_Modelo.RHH_USUARIO"%>
<%@page import="RRHH_Modelo.RHH_ACTIVIDAD"%>
<%@page import="java.util.List"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <link href="../css/NuevoStilo.css" rel="stylesheet" type="text/css"/>
        <link href="../css/EstiloImpresion.css" rel="stylesheet" media="print" type="text/css"/>
        <script src="../js/jquery-1.8.2.min.js" type="text/javascript"></script>
        <script src="../js/jquery-ui.js" type="text/javascript"></script>
        <script src="../js/jquery.ui.touch-punch.js" type="text/javascript"></script>
        <script src="../js/go.js" type="text/javascript"></script>
        <script src="../js/jquery.PrintArea.js" type="text/javascript"></script>
        <script src="../js/jspdf.min.js" type="text/javascript"></script>
        <script src="../js/SIS/SIS_CARGAR_KARDEX.js" type="text/javascript"></script>
        <script src="../js/RRHH/RRHH_ORGANIGRAMA.js" type="text/javascript"></script>
    </head>
    <body>
        <div id="CuerpoFormulario" class="contenedor100">
            <h1 id="tituloFormulario" >ESTRUCTURA ORGANIZACIONAL</h1>
            <%
                RHH_USUARIO usuario = ((RHH_USUARIO) request.getSession().getAttribute("usr"));
                Conexion con = new Conexion(usuario.getUSUARIO(), usuario.getPASSWORD());
            %>
            <div id="myDiagramDiv" class="altoGrande" moz-opaque style="border: solid 1px blue; width:99%; background: white;"></div>
            <div class="centrado">
                <button onclick="cambioNodo(this);" class="mediano" style="border-radius: 7px;">Resumen</button>
            </div>
            <div id="popUpbackGround"></div>

            <input type="hidden" name="departamento" />
            <input type="hidden" name="regional" />
            <input type="hidden" name="sucursal" />
            <div class="popup" id="cambioReferencia" style="width: 460px;">
                <span class="negrillaenter" id="mensajeAceptacion" ></span>
                <div class="contenedor50" style="height: 140px;">
                    <span class="negrillaenter centrado">Actual Area</span>
                    <span class="negrillaenter" >Departamento</span>
                    <%
                        SIS_ACCEDIDOS accedido = new SIS_ACCEDIDOS("RRHH/RRHH_CARGOS.jsp", usuario.getID(), "CARGOS");
                        accedido.setCon(con);
                        accedido.Insertar();

                        RHH_DEPARTAMENTO depto = new RHH_DEPARTAMENTO(con);
                        depto.setCon(con);
                        List<RHH_DEPARTAMENTO> Lista = depto.Todos();
                        out.print("<select name='departamento1' class='grande'>");
                        out.print("<option value='0'>-DEPTO-</option>");
                        for (int i = 0; i < Lista.size(); i++) {
                            out.print("<option value=" + (int) Lista.get(i).getID() + ">" + Lista.get(i).getDESCRIPCION() + "</option>");
                        }
                        out.print("</select>");
                    %>
                    <span class="negrillaenter" id="regional1" style="display: none;">Regional</span>
                    <select name='regional1' class="grande" style="display: none">
                    </select>
                    <span class="negrillaenter" id="sucursal1" style="display: none;">Sucursal</span>
                    <select name='sucursal1' class="grande" style="display: none">
                    </select>
                </div>
                <div class="contenedor50" style="height: 140px;">
                    <span class="negrillaenter centrado">Nueva Area</span>
                    <span class="negrillaenter" >Departamento</span>
                    <%
                        out.print("<select name='departamento2' class='grande'>");
                        out.print("<option value='0'>-DEPTO-</option>");
                        for (int i = 0; i < Lista.size(); i++) {
                            out.print("<option value=" + (int) Lista.get(i).getID() + ">" + Lista.get(i).getDESCRIPCION() + "</option>");
                        }
                        out.print("</select>");
                    %>
                    <span class="negrillaenter" id="regional2" style="display: none;">Regional</span>
                    <select name='regional2' class="grande" style="display: none">
                    </select>
                    <span class="negrillaenter" id="sucursal2" style="display: none;">Sucursal</span>
                    <select name='sucursal2' class="grande" style="display: none">
                    </select>
                </div>
                <div class="centrado">
                    <button onclick="GuardarDependencia()" class="normal" id="GuardarModificar" >Guardar</button>
                    <button onclick="cancelPopUp()" id="Cancelar" class="normal">Cancelar</button>
                </div> 
            </div>
            <div id="nodoPopUp" class="popup" style="display: none; overflow: hidden; height: 390px; width: 940px;">
                <div class="negrilla centrado" style="font-size: 14px;" id="tituloPanel"></div>
                <div id="panelSeleccionAction" style="height: 375px; padding: 8px; overflow-y: auto;" >
                    <div class="contenedor30">
                        <div class="negrilla centrado">Gestion Cargo</div>
                        <button class="grande" style="border: solid;" onclick="cambioPanel(this, 0)">Modificacion Cargo</button>
                        <button class="grande" style="border: solid;" onclick="cambioPanel(this, 1)">Asignacion Perfil</button>
                        <button class="grande" style="border: solid;" onclick="cambioPanel(this, 3)">Asignar Horario</button>
                        <button class="grande" style="border: solid;" onclick="cambioPanel(this, 4)">Gestionar Actividades</button>
                        <button class="grande" style="border: solid;" onclick="cambioPanel(this, 5)">Eliminar Cargo</button>
                    </div>
                    <div class="contenedor40">
                        <img src="../img/imagen2.png" alt=""    style="width: 100%;"/>
                    </div>    
                    <div class="contenedor30">
                        <div class="negrilla centrado">Gestion Organigrama</div>
                        <button class="grande" style="border: solid;" onclick="cambioPanel(this, 2)">Contrato Directo</button>
                        <button class="grande" style="border: solid;" onclick="cambioPanel(this, 10)">Kardex Empleado</button>
                        <button class="grande" style="border: solid;" id="susEmp" onclick="cambioPanel(this, 6)">Suspencion Empleado</button>
                        <button class="grande" style="border: solid;" onclick="cambioPanel(this, 7)">Retiro Empleado</button>
                        <button class="grande" style="border: solid;" onclick="cambioPanel(this, 8)">Promover Empleado</button>
                        <button class="grande" style="border: solid;" onclick="cambioPanel(this, 9)">Jubilacion</button>
                        <button class="grande" style="border: solid;" onclick="cambioPanel(this, 11)">Incremento Salarial</button>
                    </div>    
                </div>

                <div id="panelAsignacionPerfiles" style="height: 345px; padding: 8px; overflow-y: auto; display: none;" >
                </div>

                <div id="panelCalendario" style="height: 345px; padding: 8px;  display: none;" >
                    <div class="contenedor80" style=" padding-right: 5px;">
                        <div class="negrilla centrado" id="fechaCalendario" >Descripción</div>
                        <span class="negrilla alinearIzquierda" onclick="cambiarMes(1)">Mes Anterior</span>
                        <span class="negrilla alinearDerecha" onclick="cambiarMes(2)">Mes Siguiente</span>
                        <div style="clear: both;"></div>
                        <table id="tablacalendario" style="text-align: center; width: 100%; height: 316px; padding-right: 5px;">
                        </table>
                    </div>
                    <div class="contenedor20" style="height: 350px; overflow-x: none; overflow-y: auto;" >
                        <span class="negrilla">Actividades</span><span id="addactividad" class="negrilla" onclick="addActividades(this)">(+)</span>
                        <%
                            List<RHH_ACTIVIDAD> listaActividades = new RHH_ACTIVIDAD(con).Todos();
                            for (int i = 0; i < listaActividades.size(); i++) {
                                out.print("<div class='draggable' data-estado='actividad' style=' width: 75px; height: 50px; background:" + listaActividades.get(i).getCOLOR() + "' data-idactividad=" + listaActividades.get(i).getID() + "><span onclick=\"eliminarActividadlista(this," + listaActividades.get(i).getID() + ")\"  style='font-size: 15px; top: 37px; margin-right: 0px; position: relative; display: inline-block; float: right;'>x</span>" + listaActividades.get(i).getDESCRIPCION() + "</div>");
                            }
                        %>
                    </div>
                </div>
                <div id="panelAsignacionHorario" style="height: 345px; padding: 8px; overflow-y: auto; display: none;" >
                </div>
                <div id="panelCreacionPersonal"  style="overflow: hidden; padding: 8px;  width: 825px; display: none; height: 316px; margin: 0 auto;" >
                    <form id="reg" enctype="multipart/form-data">
                        <div style='width: 280px; height: 360px; float: left'>
                            <select id="prolistausuario2" onchange="cambiousuario(this)" style="width:215px ">
                            </select>
                            <img src="../img/imagen3.jpg" id="fotoEmp" onclick="abrirFile('file');" alt="" style="height: 100px; width: 140px; margin-left: 15px; margin-bottom: 6px;" />
                            <input type="file" id="file" name="file" onchange="openFile(event, this, 1);" style="display: none;"/>
                            <input  type="hidden" name="proceso" value="guardarusuario"/>
                            <input type="hidden" name="pers" value="0"/>
                            <input type="hidden" name="estado" value="0"/>
                            <input type="hidden" name="cargoe"  value="guardarusuario"/>
                            <span class="negrillaenter">Carnet</span>
                            <input type="text" name="ci"  value="" onblur="validarCi(this)" class="chico" placeholder="Carnet"/>
                            <select name="depto" class="chico">
                                <%
                                    accedido.setCon(con);
                                    accedido.Insertar();
                                    accedido.setCon(con);
                                    accedido.Insertar();
                                    RHH_REGIONAL depto2 = new RHH_REGIONAL(con);
                                    depto2.setCon(con);
                                    List<RHH_REGIONAL> listadep = depto2.Todos();
                                    for (int i = 0; i < listadep.size(); i++) {
                                        out.print("<option value='" + listadep.get(i).getID() + "'>" + listadep.get(i).getACRONIMO() + "</option>");
                                    }
                                %>

                            </select><br>
                            <span class="negrillaenter">Nombre:</span>
                            <input type="text" name="nombre1" value="" style="width: 93px;" placeholder="NOMBRE"/>
                            <input type="text" name="nombre2" value="" style="width: 93px;" placeholder="2º NOMBRE"/>
                            <input type="text" name="apepat" value="" class="grande" placeholder="APELLIDO PATERNO"/>
                            <input type="text" name="apemat" value="" class="grande" placeholder="APELLIDO MATERNO"/>
                            <span class="negrillaenter">Profesión:</span>
                            <select name="prof" class="grande">
                                <%
                                    List<RHH_PROFESION> listaprof = new RHH_PROFESION(con).Todos();
                                    for (int i = 0; i < listaprof.size(); i++) {
                                        out.print("<option value='" + listaprof.get(i).getID() + "'>" + listaprof.get(i).getDESCRIPCION() + "</option>");
                                    }
                                    RHH_SALARIO_MINIMO salario = new RHH_SALARIO_MINIMO(con);
                                    double mont = salario.salarioActual();

                                %>
                            </select>
                            <span class="negrilla" onclick="abrirCreacionProfesion(this)" data-tipo="0">(+)</span>
                            <div id="contenedorProfesion" style="display: none; background: white; padding: 10px;">
                                <div class="centrado">Creación Profesión:</div>
                                <input type="text" class="normal" id="profesionnuevo"/>
                            </div>
                        </div>
                        <div style='width: 230px; height: 360px; float: left'>
                            <span class="negrillaenter">Telefono:</span>
                            <input type="text" value="" name="telf"  class="Normal" onkeyup="existeRepetido(this, '1')"/>
                            <span class="negrillaenter">Correo</span>
                            <input type="text" value="" name="email" onblur="existeRepetido(this, '0');"  class="mediano"/>
                            <span class="negrillaenter">Años de Experiencia:</span>
                            <input type="number" name="anos" value="0"/>
                            <span class="negrillaenter">Hoja de Vida: </span>
                            <input style="width: 91px;" type="file" name="curr" onchange="openFile(event, this, 3)"/>
                            <img src='../img/iconos/ver.jpg' onclick='abrirArchivo(this)' name='verdocs'  style='width: 40px; margin: 0px 10px; border-radius: 10px; display: none;'/>
                            <span class="negrillaenter">Sueldo:</span>
                            <input type='text'  class="normal" name='salario' value="<% out.print(mont);%>" data-val="<% out.print(mont);%>" />
                            <span class="negrilla">Bs</span>   
                            <span class="negrillaenter">Persona Solicitante:</span>
                            <select name="cago_jefe">
                                <%
                                    List<RHH_USUARIO> li_otros = new RHH_USUARIO(con).Todos();
                                    for (int i = 0; i < li_otros.size(); i++) {
                                        RHH_PERSONA p = new RHH_PERSONA(con).BuscarxID(li_otros.get(i).getID_PERSONA());
                                        out.print("<option value='" + li_otros.get(i).getID() + "'>" + p.getPRIMER_NOMBRE() + " " + p.getPRIMER_APELLIDO() + "</option>");
                                    }
                                %>
                            </select>
                        </div>
                        <div style='width: 280px; height: 360px; float: left' >
                            <span class="negrillaenter">Usuario</span>
                            <input type="text" name="usrs" onkeyup="validarUsuario(this)" value="" class="mediano"/>
                            <span class="negrillaenter">Contraseña</span>
                            <input type="password" name="pass" value="" autocomplete="off"/><br>
                            <span class="negrillaenter">Repita Contraseña</span>
                            <input type="password" name="repass" autocomplete="off" value="" /><br>
                            <span class="negrillaenter">Celular Corporativo <span onclick="addtelf();">(+)</span></span>
                            <div id='campotelf'>
                                <select name='telefono0' class="grande" style="margin: 6px 5px;" >
                                    <%                                RHH_TELEFONOS telefono = new RHH_TELEFONOS(con);
                                        List<RHH_TELEFONOS> listatelefono = telefono.TodosDisponibles();
                                        out.print("<option value='0'>Seleccione Corporativo</option>");
                                        for (int i = 0; i < listatelefono.size(); i++) {
                                            out.print("<option value='" + listatelefono.get(i).getID() + "'>" + listatelefono.get(i).getNUMERO() + "</option>");
                                        }

                                    %>
                                </select>
                                <input type='number' style="margin-left: 5px;"  value='0.0' step='0.5'  name='montotelf0' class="pequeño" /><br>
                            </div>
                            <span class="negrillaenter">Cuentas Bancarias <span onclick='addcuent();'>(+)</span></span>
                            <div id='campocuent'>
                                <input type='number' style='margin-left: 2px;' name='cuenta0' class="chico" />
                                <input type='text' style='margin-left: 3px;' value=''  placeholder='Nombre del Banco' name='banco0' class="mediano"/>
                            </div>
                            <span class="negrillaenter">Fecha de Contratacion</span>
                            <input type='text'  value='' name='fecha_ini' class="fecha"/>
                            <span class="negrillaenter">Fecha Finalizacion de Contrato</span>
                            <input type='text' value='' name='fecha_fin' class="fecha"/>
                        </div>
                        <div style=" height: 343px; left: 0; overflow: hidden; position: relative; width: 610px;"  id="datosextra" >
                            <div id="contenedorDatosyDocumentos" style='margin-top:38px;' onclick="abrirdatosDocumentos(this)" data-estado="0">
                                <div class="negrilla">DATOS Y DOCUMENTOS </div>
                            </div>
                            <div  style="background: none repeat scroll 0px 0px white; float: left; height: 100%; width: 91%; border: 1.5px solid;">
                                <div class="centrado negrilla"></div>
                                <div class="centrado negrilla"></div>
                                <div style="border-right: thin solid;
                                     height: 93%;
                                     margin-top: 8px;
                                     overflow-x: hidden;
                                     overflow-y: auto;
                                     width: 200px; float: left;">
                                    <div onclick='abriractivos(this);' data-estado='cerrado' class="negrilla" >ACTIVOS</div>
                                    <div onclick='abrirfungible(this);' data-estado='cerrado' class="negrilla">FUNGIBLES</div>
                                    <%                                String contenedores = "";
                                        List<RHH_CATEGORIA_DATO> listac = new RHH_CATEGORIA_DATO(con).Todos();
                                        for (int j = 0; j < listac.size(); j++) {
                                            RHH_DATOS dato = new RHH_DATOS(con);
                                            List<RHH_DATOS> lista1 = dato.BuscarXidCategoria(listac.get(j).getID());
                                            if (lista1.size() > 0) {
                                                out.print("<div class='negrillaenter' data-estado='cerrado' onclick=\"abrirDatos(this," + listac.get(j).getID() + ")\" >" + listac.get(j).getDESCRIPCION() + "</div>");
                                                contenedores += "<div style='display: none; ' name='contenedorDato' data-id='" + listac.get(j).getID() + "'>";
                                            }
                                            for (int i = 0; i < lista1.size(); i++) {
                                                String aux = "";
                                                if (lista1.get(i).getESTADO_CADUCIDAD() == 1) {
                                                    aux = "Caducidad Documento <input type='text' class='chico fecha' style=' margin-left: 7px;' name='" + lista1.get(i).getID() + "_o'/><br>";
                                                }
                                                if (lista1.get(i).getTIPO() == 1) {
                                                    contenedores += "<div data-class='dato' style='border-bottom: 2px solid silver;' data-iddato='" + lista1.get(i).getID() + "'>"
                                                            + "<span class='negrillaenter'  style='font-size: 16px; text-align: center;'>" + lista1.get(i).getDESCRIPCION()
                                                            + "</span>" + aux
                                                            + "<span >Nombre Archivo:</span><br><span></span><input type='file' onchange=\"openFile(event,this,2);\" name='" + lista1.get(i).getID() + "' value='' style='display:none;'/><img src='../img/Upload-files.jpg' "
                                                            + "onclick=\"abrirFile(" + lista1.get(i).getID() + ")\" alt='' "
                                                            + "style='width: 25px; margin: 0px 10px; border-radius: 4px;'/><img src='../img/ver.jpg' "
                                                            + "alt='' onclick='abrirArchivo(this)' name='verdocs'  style='width: 28px; height:28px;  margin: 0px -5px; border-radius: 10px;'/>" + "<br></div>";
                                                } else {
                                                    contenedores += "<div data-class='dato' style='border-bottom: 2px solid silver;' data-iddato='" + lista1.get(i).getID() + "'>"
                                                            + "<span class='negrillaenter' style='font-size: 16px; text-align: center;'>" + lista1.get(i).getDESCRIPCION() + "</span>"
                                                            + "<input type='text' name='" + lista1.get(i).getID() + "' value=''/><br></div>";
                                                }
                                            }
                                            if (lista1.size() > 0) {
                                                contenedores += "</div>";
                                            }
                                        }
                                    %>
                                </div>
                                <div style="float: left;
                                     height: 85%;
                                     margin-top: 8px;
                                     overflow-x: hidden;
                                     overflow-y: auto;
                                     padding: 11px;
                                     width: 320px;">
                                    <div id='campoActivo' name='contenedorDato' style='display: none;'>
                                        <%
                                            List<ADM_TIPO_ACTIVO_FUNGIBLE> af = new ADM_TIPO_ACTIVO_FUNGIBLE(con).TodosActivos();
                                            for (int i = 0; i < af.size(); i++) {
                                                out.print("<input type='checkbox' name='activo_" + af.get(i).getID() + "' onchange=\"cambiocantActfunc(this)\"/><span class='negrilla'>" + af.get(i).getDESCRIPCION() + "</span><input placeholder='Cantidad' onkeyup=\"cambiocantActfunc(this)\" style='margin:5px;' type='number' val='0' name='activo_cant_" + af.get(i).getID() + "' class='normal'/><br>");
                                            }
                                        %>
                                    </div>
                                    <div id='campoFingible' name='contenedorDato' style="display: none;">
                                        <%
                                            af = new ADM_TIPO_ACTIVO_FUNGIBLE(con).TodosFungibles();
                                            for (int i = 0; i < af.size(); i++) {
                                                out.print("<input type='checkbox' name='fungibles_" + af.get(i).getID() + "' onchange=\"cambiocantActfunc(this)\"/><span class='negrilla'>" + af.get(i).getDESCRIPCION() + "</span><input placeholder='Cantidad' onkeyup=\"cambiocantActfunc(this)\" type='number' val='0' class='normal' style='margin:5px;' name='fungibles_cant_" + af.get(i).getID() + "'/><br>");
                                            }
                                        %>
                                    </div>
                                    <%
                                        out.print(contenedores);
                                    %>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div style="clear: both;"></div>
                </div>
                <div id="panelPromocionUsuario" style="height: 345px; padding: 8px; overflow-y: auto; display: none;" >
                    <div class="contenedor50">
                        <select id="prolistausuario" onchange="seleccionarUsuario(this)" style="width:215px ">
                        </select>
                        <div class="contenedor50" >
                            <div id="fotou" style="height: 200px; width: 170px; border: solid; display: inline-block">

                            </div>
                        </div>
                        <div class="contenedor50">
                            <span class="negrillaenter">Nombre</span>
                            <span id="pronombre">Juan pere mendoza</span><br>
                            <span class="negrillaenter">Cargo</span>
                            <span id="procargo">Jefe planta</span><br>
                            <span class="negrillaenter">Profesion</span>
                            <span id="proprofesion">Ing Sistema</span><br>
                            <span class="negrillaenter">Nuevo Cargo</span>
                            <span id="pronuevocargo" >-</span><br>
                            <span class="negrillaenter">Sueldo</span>
                            <input id="prosueldo" type="text" class="normal"/>Bs<br>
                            <button onclick="promoverEmpleado()">Promover</button>
                        </div>
                    </div>
                    <div class="contenedor50" style="overflow-y: auto; height: 325px;">
                        <div data-tipo="1" style="padding: 7px; overflow: hidden; height: 30px; margin: 0px auto; width: 322px;">
                            <input class="Extragrande centrado" id="protextcargo" onkeyup="buscarCargo();" type="text" placeholder="Buscar">
                            <img alt="" src="../img/iconos/lupa.png" style="width: 25px; position: relative; top: 6px;" onclick="buscarCargo();">
                            <img alt="" src="../img/iconos/mostrar.png" onclick="busquedaAvanzada(this)" style="width: 25px; position: relative; top: 5px;">
                            <span class="negrillaenter">Departamento</span>
                            <select id="prodpto">
                                <%
                                    RHH_DEPARTAMENTO dep = new RHH_DEPARTAMENTO(con);
                                    List<RHH_DEPARTAMENTO> listdep = dep.Todos();
                                    out.print("<option value='0'>-Selecione Departamento-</option>");
                                    for (int i = 0; i < listdep.size(); i++) {
                                        RHH_DEPARTAMENTO asd = listdep.get(i);
                                        out.print("<option value='" + listdep.get(i).getID() + "'>" + listdep.get(i).getDESCRIPCION() + "</option>");
                                    }
                                %>
                            </select><br>
                            <span class="negrillaenter">Regional</span>
                            <select id="proreg">
                                <%
                                    out.print("<option value='0'>-Selecione Regional-</option>");
                                    RHH_REGIONAL reg = new RHH_REGIONAL(con);
                                    List<RHH_REGIONAL> listreg = reg.Todos();
                                    for (int i = 0; i < listreg.size(); i++) {
                                        out.print("<option value='" + listreg.get(i).getID() + "'>" + listreg.get(i).getDESCRIPCION() + "</option>");
                                    }
                                %>
                            </select><br>
                        </div>
                        <div id="procontcargo"></div>


                    </div>
                </div>
                <div id="panelCreacionCargo" style="height: 300px; padding: 8px; overflow-y: auto; display: none;" >
                    <form id="crearcargo">
                        <div class="contenedor50">
                            <span class="negrillaenter" >Departamento</span>
                            <%
                                out.print("<select name='departamento' class='mediano'>");
                                out.print("<option value='0'>-DEPTO-</option>");
                                for (int i = 0; i < Lista.size(); i++) {
                                    out.print("<option value=" + (int) Lista.get(i).getID() + ">" + Lista.get(i).getDESCRIPCION() + "</option>");
                                }
                                out.print("</select>");
                            %>
                            <span class="negrillaenter" id="regional" style="display: none;">Regional</span>
                            <select name='regional' class="grande" style="display: none">
                            </select>
                            <span class="negrillaenter" id="sucursal" style="display: none;">Sucursal</span>
                            <select name='sucursal' class="grande" style="display: none">
                            </select>
                            <span class="negrillaenter">Descripcion</span>
                            <input type="text" name="descripcionNuevo" value="" class="Extragrande" autofocus="true"/>                                
                            <span class="negrillaenter">Perfil</span>
                            <input type="text" name="perfil" class="Extragrande" value=""/>
                            <span class="negrillaenter">Tipo de Cargo</span>              
                            <select name="tccargo">
                                <%
                                    List<RHH_TIPOS_CARGO> ListaTipos = new RHH_TIPOS_CARGO(con).Todos();

                                    for (int j = 0; j < ListaTipos.size(); j++) {
                                        out.print("<option value='" + ListaTipos.get(j).getID() + "'>" + ListaTipos.get(j).getDESCRIPCION() + "</option>");
                                    }
                                %>
                            </select>
                            <span onclick="MostrarTCargo();">(+)</span><br>                                
                            <input type="text" value="" placeholder="Nuevo Tipo" id="txtTipo" style="display: none; "/>
                            <input type="button" onclick="nuevoTipo();" value="Agregar" id="btnTipo" class="chico" style="display: none;"/><br>
                            <input type="checkbox" id="staff"/><span class="negrilla">Cargo Staff</span><br>
                        </div>
                        <div class="contenedor50">
                            <span class="negrilla">Seleccionar Datos</span>
                            <span onclick="MostrarDato(this);">(+)</span><br>
                            <div style="display: none; width: 230px; margin:15px;" id="divdatos">                        
                                <span class="negrillaenter">CREACION DATOS</span>
                                <span class="negrillaenter">Descripcion</span>
                                <input type="text" value="" id="txtDato" placeholder="Nuevo Dato" class="mediano"/>
                                <span class="negrillaenter">Tipo</span>
                                <select name="tipodato" class="mediano">
                                    <%
                                        List<RHH_CATEGORIA_DATO> lista = new RHH_CATEGORIA_DATO(con).Todos();
                                        for (int i = 0; i < lista.size(); i++) {
                                            out.print("<option value='" + lista.get(i).getID() + "'>" + lista.get(i).getDESCRIPCION() + "</option>");
                                        }
                                    %>
                                </select>
                                <span onclick="addcategoriadato();" class="negrilla">(+)</span><br>
                                <buttom onclick="nuevoDato();" id="btnDato" class="normal" style="border: thin solid; padding: 5px; display: block; text-align: center;">Guardar</buttom>
                            </div>
                            <ul id="lista-datos" style=" margin-left: 15px;">
                            </ul>

                            <input type="text" value="" id="txtDato" placeholder="Nuevo Dato" style="display: none;"/>
                            <input type="button" onclick="nuevoDato();" id="btnDato" value="Agregar" class="chico" style="display: none;"/>
                            <br>
                            <span class="negrilla">Seleccionar Documentos</span>
                            <span onclick="MostrarDocs(this);">(+)</span><br>
                            <div id="divdatos2" style="display: none; width: 230px; margin:15px;">
                                <span class="negrillaenter">Descripcion</span>
                                <input type="text" value="" id="txtDocs" placeholder="Nuevo Documento"/>
                                <span class="negrillaenter">Tipo</span>
                                <select name="tipodoc">
                                    <%
                                        for (int i = 0; i < lista.size(); i++) {
                                            out.print("<option value='" + lista.get(i).getID() + "'>" + lista.get(i).getDESCRIPCION() + "</option>");
                                        }
                                    %>
                                </select>
                                <span onclick="addcategoriadato();" class="negrilla">(+)</span><br>
                                <input type="checkbox" name="fechaVencimiento" /><span class="negrilla">Obligar Fecha Vencimiento </span><br>
                                <buttom onclick="nuevoDocs();" id="btnDocs" class="normal" style="border: thin solid; padding: 5px; display: block; text-align: center;">Guardar</buttom>
                            </div>
                            <ul id="lista-docs" style=" margin-left: 15px;">
                            </ul>

                        </div>
                        <input type="text" value="" id="txtDocs" placeholder="Nuevo Documento" style="display: none;"/>
                        <input type="button" onclick="nuevoDocs();" id="btnDocs" value="Agregar" class="chico" style="display: none;"/>
                    </form>
                </div>
                <div id="botonespopUp" class="centrado">
                    <button onclick="GuardarNuevo()" class="normal" id="GuardarModificar" >Guardar</button>
                    <button onclick="cancelPopUp()" id="Cancelar" class="normal">Cancelar</button>
                </div>
            </div>
            <div id="aumentosalarial" class="popup">
                <div class="negrilla centrado">Incremento Salarial</div>
                <select id="listausuarioinc" class="grande" onchange="cambiopersonasalario(this)">

                </select>

                <span class="negrillaenter">Salario</span>
                <input type="number" id="salarioviejo" disabled="disabled" class="normal"/>
                <span class="negrillaenter">Incremento</span>
                <input type="number" id="salarionuevo" class="normal"/><br>
                <button onclick="cambiosalario(1)">Guardar</button>
                <button onclick="cambiosalario(2)">Cancelar</button>
            </div>
            <div id="suspender" class="popup">
                <div class="negrilla centrado">Incremento Salarial</div>
                <select id="listausuarioinc2" class="grande" onchange="cambiopersonasalario(this)" data-tipo='1'>

                </select>
                <button onclick="cambiosalario(3)" id='aceptasuspender'>Suspender</button>
                <button onclick="cambiosalario(2)">Cancelar</button>
            </div>
            <div class="popup" id="pop1">
                <div id="pop1_titulo" class="centrado">RETIRO DE EMPLEADO</div>
                <div>
                    <form id="form">
                        <select id="listausuarioinc3" class="grande" data-tipo='1'>

                        </select><br>
                        Fecha:<input type="text" name="pop1_fecha" value="" readonly="readonly"/><br>
                        Observacion:<input type="text" name="pop1_observacion" value="" required/><br>
                        Tipo:<select name="pop1_tipo">
                            <option value="0">VOLUNTARIO</option>
                            <option value="1">FORSOSO</option>
                            <option value="2">FORSOSO CON CAUSA</option>
                            <option value="3">PRE AVISO</option>
                            <option value="4">FIN CONTRATO</option>
                            <option value="5">RETIRO POR FALTAS</option>
                        </select><br>
                        <button type="button" onclick="retirar();">RETIRAR</button>
                        <button type="button" onclick="cancelarretiro();">CANCELAR</button>
                    </form>
                </div>
            </div>
            <div id="asignacionHorarioActividad" class="popup" style="height: 170px; z-index: 6; padding: 15px; overflow-y: auto; " >
                <span class="subTituloSubContenedor">Horario</span>
                <span class="negrillaenter">HORA_INICIO:</span>
                <input type="number" value="01:00" class="pequeño" min="0" max="23" required="required" name="hrinicio"/><span class="negrilla" style="font-size: x-large">:</span><input type="number" value="01:00" class="pequeño" min="0" max="59" required="required" name="mininicio"/><br>
                <span class="negrillaenter">HORA_FIN:</span>
                <input type="number" value="01:00" class="pequeño" min="0" max="23" required="required" name="hrfin"/><span class="negrilla" style="font-size: x-large">:</span><input type="number" value="01:00" class="pequeño" min="0" max="59" required="required" name="minfin"/><br>
                <button onclick="agregarActividad()" class="centrado">Guardar</button>
            </div>
            <div id="popupAddActividad" class="popup" style="height: 210px; z-index: 0; padding: 8px; overflow-y: auto; " >
                <span class="subTituloSubContenedor">Creacion Actividad</span>
                <span class="negrillaenter">Descripcion</span>
                <input type="text" name="desc"/>
                <span class="negrillaenter">Tipo Actividad</span>
                <select name="tipoActividad">
                    <option value="0">Trabajo</option>
                    <option value="1">Feriado</option>
                </select>
                <span class="negrillaenter">Color</span>
                <input type="color" name="color" /><br>
                <input type="button" value="Crear" name="CrearActividad" onclick="CrearActividad();"/>
                <input type="button" value="Cancelar" name="CancelarActividad" onclick="cancelarNuevaActividad();"/>
            </div>
            <div id="categoriadatos" class="popup">
                <span class="subTituloSubContenedor">Creacion categoria dato</span>
                <input type="text" value="" id="txtcatDato" placeholder="Nueva categoria"/>
                <buttom style="border: solid thin; padding: 5px;" onclick="nuevocatDato();">Crear</buttom>
                <buttom style="border: solid thin; padding: 5px;" onclick="canceldato();">Cancelar</buttom>
            </div>
        </div>
        <div id="popupImprimir" class="popup" style="width: 850px; height: 570px;">
            <span class="negrillaenter centrado">VISTA PREVIA DEL DIAGRAMA</span>
            <div style="margin: 10px 0">
                <select class="grande" id="tipohoja" onclick="generarImagen()">
                    <option value="1">Carta</option>
                    <option value="2">A1</option>
                    <option value="3">A2</option>
                    <option value="4">A3</option>
                    <option value="5">A4</option>
                </select>
                <input type="radio" name="rimp" data-val="1" checked="checked"/>
                <span class="negrilla">Actual</span>
                <input type="radio" name="rimp" data-val="2"/>
                <span class="negrilla">Todo</span>
                <button onclick="imprimirExportar(2)" class="mediano">Exportar imagen</button>
                <button onclick="imprimirExportar(1)" class="chico">Imprimir</button>
                <button onclick="SiguienteAnterior(2)" id="antimg" class="normal" disabled="disabled">Anterior</button>
                <button onclick="SiguienteAnterior(1)" id="sgtimg" class="normal">Siguiente</button>
            </div>
            <div style="border: medium solid; height: 455px; overflow: hidden; margin: auto; width: 825px;">
                <div id="vistaprevia">

                </div>
            </div>
            <div style="margin:10px 0;">
                <span name="escala" class="negrilla">Escala :</span>
                <span class="negrilla" name="porcentajeescala">60</span>
                <span class="negrilla">%</span>
                <input type="range" onchange="cambiorango(this)" style="vertical-align: middle; margin:0 40px;" min="10" max="100" step="10" value="60" class="Extragrande" />
                <input type="radio" name="position" data-val="1" checked="checked" />
                <span class="negrilla">Vertical</span>
                <input type="radio" name="position" data-val="2"/>
                <span class="negrilla">Horizontal</span>
            </div>
        </div>
        <footer>
            <a  href="#" onclick="exportarImagen()"><img src="../img/iconos/generarComprobante.png" alt=""/><br/>
                Exportar
            </a >
        </footer>
    </body>
</html>
